<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="./scripts/vue.js"></script>
		<script src="./scripts/vue-router_3.0.2.js"></script>
	</head>
	<body>
		<div id="app">
			<a href="#/zhuye">主页</a>
			<a href="#/keji">科技</a>
			<a href="#/caijing">财经</a>
			<a href="#/yule">娱乐</a>

			<component :is="comName"></component>
		</div>

		<script>
			const zhuye = {
				template: `<h1>主页信息</h1>`
			}
			const keji = {
				template: `<h1>科技信息</h1>`
			}
			const caijing = {
				template: `<h1>财经信息</h1>`
			}
			const yule = {
				template: `<h1>娱乐信息</h1>`
			}
			var vm = new Vue({
				el: '#app',
				data: {
					comName: 'zhuye'
				},
				components: {
					zhuye,
					keji,
					caijing,
					yule
				}
			})

			window.onhashchange = function () {
				console.log(location.hash)
				console.log(location.hash.slice(1))
				switch (location.hash.slice(1)) {
					case '/zhuye':
						vm.comName = 'zhuye'
						break
					case '/keji':
						vm.comName = 'keji'
						break
					case '/caijing':
						vm.comName = 'caijing'
						break
					case '/yule':
						vm.comName = 'yule'
						break
				}
			}
		</script>
	</body>
</html>
